import React, { ReactElement, useState, useEffect } from 'react'
// import style from './index.less'
import { useDispatch, useSelector } from 'umi'
import { Card, Table, Button, Modal, Input, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import Myfrom from '../../components/MyBannerFrom'
import { reqDelOne, reqChangeOne } from '../../api/bannerReq'
const { confirm } = Modal;
interface Props {

}
interface nameType {
    name: string,
    rulesMsg: string,
    id: string,
    value: string
}
export default function Banner({ }: Props): ReactElement {
    const dispatch = useDispatch()
    //得到所有的banner
    function addBanner(payload: any) {
        dispatch({
            type: "bannerModel/addBanner",
            payload
        })
    }
    //得到状态机中轮播图数据
    const { bannerList } = useSelector((state: any) => {
        return state.bannerModel
    })
    //表格名字
    const columns = [
        {
            title: '轮播图ID',
            dataIndex: '_id',
            key: '_id'
        },
        {
            title: '产品ID',
            dataIndex: 'goods_id',
            key: 'goods_id'
        },
        {
            title: '轮播图片',
            dataIndex: 'image_src',
            key: 'image_src',
            render: (text: any) => {
                if (text) {
                    return (
                        <>
                            <img src={text} alt="" />
                        </>
                    )
                } else {
                    return (
                        <>
                            暂无图片
                        </>
                    )
                }

            }
        },
        {
            title: '跳转链接',
            dataIndex: 'navigator_url',
            key: 'navigator_url'
        },
        {
            title: '跳转类型',
            dataIndex: 'open_type',
            key: 'open_type',
        },
        {
            title: '操作',
            render: (text: any) => {
                return (
                    <>
                        <Button type="ghost" onClick={() => showConfirm(text)}>删除</Button>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                        <Button type="dashed" onClick={() => showModalChange(text)}>修改</Button>
                    </>
                )

            },
        }
    ];
    //传入表格的值，和提示文字
    const name = [
        { name: "商品ID", rulesMsg: "请输入商品ID", id: "goods_id", value: "" },
        { name: "图片路径", rulesMsg: "请输入图片路径", id: "image_src", value: "https://s3.bmp.ovh/imgs/2021/09/a611c78715f3363d.jpg" },
        { name: "导航地址", rulesMsg: "请输入导航地址", id: "navigator_url", value: "" },
        { name: "打开方式", rulesMsg: "请输入打开方式", id: "open_type", value: "" },
    ]
    const [visible, setVisible] = useState(false)//模态框按钮
    const [visible1, setVisible1] = useState(false)//模态框按钮
    const [isShow, setIsshow] = useState(false)//是否切换返回按钮
    const [changeName, setchangeName] = useState(name)//默认的修改值
    const [id, setId] = useState("")//默认的修改值
    //模拟生命周期

    //展示模态框
    function showModal() {
        setVisible(true)
    }
    const showModalChange = (name: any) => {
        console.log(name._id);
        setId(name._id)
        const NewName = [
            { name: "商品ID", rulesMsg: "请输入商品ID", id: "goods_id", value: name.goods_id },
            { name: "图片路径", rulesMsg: "请输入图片路径", id: "image_src", value: name.image_src },
            { name: "导航地址", rulesMsg: "请输入导航地址", id: "navigator_url", value: name.navigator_url },
            { name: "打开方式", rulesMsg: "请输入打开方式", id: "open_type", value: name.open_type },
        ]
        setchangeName(NewName)
        setVisible1(true)
    }
    //隐藏模态框
    function hideModal() {
        setVisible(false)
        setVisible1(false)
    }
    //点击确认的回调
    function handleCancel(e: any) {
        addBanner(e)
        hideModal()
    }
    //点击确认修改
    async function handleChange(e: any) {
        e._id = id
        const res = await reqChangeOne(e)
        if (res.code === 200) {
            message.success("修改成功")
        } else {
            message.error("修改失败")
        }
        dispatch({
            type: "bannerModel/getBanner"
        })
        setVisible1(false)
    }
    //展示确认框
    const showConfirm = (text: any): void => {
        confirm({
            title: '你确定要删除吗？',
            icon: <ExclamationCircleOutlined />,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                delDataOne(text._id)
            },

        });
    }
    //确认删除
    const delDataOne = async (id: string) => {
        console.log(id, "要删除的id-----------");
        const res = await reqDelOne({ _id: id })
        if (res.code === 200) {
            message.success("删除成功")
        } else {
            message.error("删除失败")
        }
        dispatch({
            type: "bannerModel/getBanner"
        })

    }
    return (
        <Card title="轮播图列表" extra={<span onClick={showModal} style={{ color: "skyblue", cursor: 'pointer', width: "100%" }}> 添加</span>}>
            <Table
                pagination={{ defaultCurrent: 1, defaultPageSize: 4, showQuickJumper: true }}
                bordered
                rowKey="_id"
                columns={columns}
                dataSource={bannerList} />
            <Modal
                title="添加轮播图"
                visible={visible}
                onCancel={hideModal}
                style={{ padding: "25px" }}
                okText="确认"
                cancelText="取消"
                destroyOnClose={true}
                footer=""
            >
                <Myfrom handleCancel={handleCancel} name={name} typeName="添加"></Myfrom>
            </Modal>
            <Modal
                title="修改轮播图"
                visible={visible1}
                onCancel={hideModal}
                style={{ padding: "25px" }}
                okText="确认"
                cancelText="取消"
                destroyOnClose={true}
                footer=""
            >
                <Myfrom handleCancel={handleChange} name={changeName} typeName="修改"></Myfrom>
            </Modal>
        </Card>
    )
}
